import SoundManager from '../utils/SoundManager.js';

export default class SettingsMenu {
    constructor() {
        this.element = document.createElement('div');
        this.element.className = 'settings-menu';
        this.init();
    }

    init() {
        this.element.innerHTML = `
            <div class="settings-content">
                <h2>设置</h2>
                <div class="setting-item">
                    <label>背景音乐</label>
                    <button id="bgmToggle" class="toggle-btn">
                        ${SoundManager.settings.bgmEnabled ? '开' : '关'}
                    </button>
                </div>
                <div class="setting-item">
                    <label>音效</label>
                    <button id="soundToggle" class="toggle-btn">
                        ${SoundManager.settings.soundEnabled ? '开' : '关'}
                    </button>
                </div>
                <button id="closeSettings">关闭</button>
            </div>
        `;

        this.bindEvents();
    }

    bindEvents() {
        const bgmBtn = this.element.querySelector('#bgmToggle');
        const soundBtn = this.element.querySelector('#soundToggle');
        const closeBtn = this.element.querySelector('#closeSettings');

        bgmBtn.onclick = () => {
            SoundManager.toggleBGM();
            bgmBtn.textContent = SoundManager.settings.bgmEnabled ? '开' : '关';
        };

        soundBtn.onclick = () => {
            SoundManager.toggleSound();
            soundBtn.textContent = SoundManager.settings.soundEnabled ? '开' : '关';
        };

        closeBtn.onclick = () => this.hide();
    }

    show() {
        document.body.appendChild(this.element);
    }

    hide() {
        if (this.element.parentNode) {
            this.element.parentNode.removeChild(this.element);
        }
    }
}